<template>
    <div class="my_content  h-full flex flex-col">
        <div>
            <TitleBar>不同通行方式人员占比</TitleBar>
        </div>
        <div id="echarts_flowRate" class="flex-1"></div>
    </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import { debounce } from 'lodash';
import { gatewayRateStatistics } from "src/api/screenDevice";
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue'

export default defineComponent({
    components: { TitleBar },
    inject: ['villageId'],
    data() {
        return {
            datas: [
                {
                    name: '二维码',
                    value: 60,
                },
                {
                    name: '人脸识别',
                    value: 70
                },
                {
                    name: '一卡通',
                    value: 40
                },
                {
                    name: '远程开锁',
                    value: 50
                }
            ]
        }
    },
    mounted() {
        this.initEcharts();
        this.setIntervalTotalFn()
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
        this.myCharts && this.myCharts.dispose()
    },
    methods: {
        setIntervalTotalFn() {
            const villageId = this.villageId
            if (villageId) {
                this.gatewayRateStatistics(villageId);
                this.timer = null;
                this.timer = setInterval(() => {
                    this.gatewayRateStatistics(villageId);
                }, 20000);
            }
        },
        gatewayRateStatistics(villageId) {
            // return
            gatewayRateStatistics({ villageId: villageId }).then(res => {
                if (res.success == true) {
                    let sum = (res.data.qrCountRate+res.data.faceCountRate+res.data.cardCount+res.data.controllerCountRate)
                    this.datas[0].value = res.data.qrCountRate && (res.data.qrCountRate/sum*100).toFixed(0) || 0;
                    this.datas[1].value = res.data.faceCountRate && (res.data.faceCountRate/sum*100).toFixed(0)  || 0;
                    this.datas[2].value = res.data.cardCount && (res.data.cardCount/sum*100).toFixed(0)  || 0;
                    this.datas[3].value = res.data.controllerCountRate && (res.data.controllerCountRate/sum*100).toFixed(0)  || 0;
                    let innerColorList = [{ c1: '#2075CA', c2: '#6FB7FF', }, { c1: '#00B8CB', c2: '#15E9FF', }, { c1: '#36C198', c2: '#42EECF', }, { c1: ' #AF8023', c2: '#F0D090', }, { c1: '#2075CA', c2: '#6FB7FF', }, { c1: '#00B8CB', c2: '#15E9FF', }, { c1: '#36C198', c2: '#42EECF', }, { c1: ' #AF8023', c2: '#F0D090', }];
                    let innerData = JSON.parse(JSON.stringify(this.datas))
                    let first = {
                        ...innerData[0],
                        // label: {
                        //     normal: {
                        //         show: true,
                        //         formatter: '{b}   {d}%',
                        //         padding: 4,
                        //     }
                        // },
                        // labelLine: {
                        //     show: true
                        // }
                    }
                    innerData[0] = first
                    this.initEcharts(innerData, this.datas, innerColorList)
                }
            })
        },
        // 初始化echarts
        initEcharts(innerData, outData, innerColorList) {
            this.myCharts && this.myCharts.dispose()
            let myCharts = echarts.init(document.getElementById('echarts_flowRate'));
            var option = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    // 给悬浮添加%
                    // formatter:function(params) {
                    //     var str = params[0].name + '<br>'
                    //     for(let item of params) {
                    //     str += item.name + ' : ' + item.value + '%<br>'
                    //     }
                    //     return str;
                    // }
                },
                legend: {
                    orient: "vertical",
                    y: 'center',
                    x: '2%',
                    itemGap: 16,
                    itemWidth: 12,
                    itemHeight: 12,
                    // 使用回调函数
                    formatter: function (name) {
                        let obj = innerData.find(x => x.name == name)
                        let value = obj ? obj.value : 0
                        // console.log('{a|' + name + '}' + " " + '{b|' + value + '}' + '{c|  %}');
                        // let abs = c ? '{c|  %}' : '0%';
                        return '{a|' + name + '}' + " " + '{b|' + value + '}' + '{c|  %}';
                        // return '{a|' + name + '}' + " " + '{b|' + p + '}' + abs;
                    },
                    textStyle: {
                        fontSize: 10,
                        color: '#E0F7FF',
                        rich: {
                            a: {
                                color: '#E0F7FF',
                                width: 80
                            },
                            b: {
                                color: '#E0F7FF',
                                fontSize: 20
                            },
                            c: {
                                color: '#E0F7FF',
                                width: 10
                            }
                        }
                    }
                },
                series: [
                    {
                        type: 'pie',
                        roseType: 'area',
                        radius: ['10', '70'],
                        // avoidLabelOverlap: false,
                        // hoverAnimation: false,
                        // clockWise: true,
                        // silent: true,
                        y: 'center',
                        left: '20%',
                        label:{
                            formatter:'{d}%'
                        },
                        itemStyle: {
                            normal: {
                                // borderWidth: 2, //设置border的宽度有多大
                                // borderColor: 'black',
                                label: {
                                    show: false,
                                    formatter: '{num|{b}:{d}%}\n{c}',
                                    edgeDistance: 5,
                                    lineHeight: 20,
                                    lineColor: 'white',
                                    fontSize: 12,
                                    rich: {
                                        num: {
                                            fontSize: 14
                                        }
                                    },
                                    textStyle: {
                                        color: 'white'
                                    },
                                },
                                labelLine: {
                                    lineStyle: {
                                        color: 'white'
                                    }
                                },
                                color: function (params) {
                                    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        {
                                            offset: 0,
                                            color: innerColorList[params.dataIndex].c1,
                                        },
                                        {
                                            offset: 1,
                                            color: innerColorList[params.dataIndex].c2,
                                        },
                                    ]);
                                },
                            }
                        },
                        data: innerData
                    },
                    {
                        type: 'pie',
                        roseType: 'area',
                        radius: ['40', '80'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        clockWise: true,
                        silent: true,
                        y: 'center',
                        left: '20%',
                        itemStyle: {
                            normal: {
                                // borderWidth: 2, //设置border的宽度有多大
                                // borderColor: 'black',
                                label: {
                                    show: false,
                                    formatter: '{num|{b}:{d}%}\n{c}',
                                    edgeDistance: 5,
                                    lineHeight: 20,
                                    fontSize: 12,
                                    rich: {
                                        num: {
                                            fontSize: 14
                                        }
                                    },
                                    textStyle: {
                                        color: 'inherit'
                                    }
                                },
                                color: function (params) {
                                    return innerColorList[params.dataIndex].c1
                                },
                                opacity: 0.3
                            }
                        },
                        data: outData
                    },
                ]
            }
            myCharts.setOption(option);
            const f = debounce(function () {
                if (myCharts.isDisposed()) {
                    window.removeEventListener('resize', f)
                } else {
                    myCharts.resize();
                }
            }, 500)
            window.addEventListener('resize', f)
            this.myCharts = myCharts
        },
    }
})

</script>

<style scoped>
</style>